<template>
  <div class="app-container">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="120px" style="width: 1020px; height: 1240px">

        <el-card style="border-radius: 10px" class="box-card">
          <div slot="header" class="clearfix">
            <el-tag
              type=""
              effect="plain">
              基本信息
            </el-tag>
          </div>
          <el-form-item label="年度" prop="duringYear" style="margin-left: -28px">
            {{form.duringYear}}
          </el-form-item>
          <el-form-item label="学生身份证" prop="cardIdentity">
            {{form.cardIdentity}}
          </el-form-item>
          <el-form-item label="身份证有效起始日期" prop="studentEffectiveCardIdentity" style="margin-left: 40px"  label-width="140px">
            {{form.studentEffectiveCardIdentity}}
          </el-form-item>
          <el-form-item label="身份证有效结束日期" prop="studentInvalidCardIdentity" style="margin-left: 20px" label-width="140px">
            {{form.studentInvalidCardIdentity}}
          </el-form-item>
          <el-form-item label="毕业中学" prop="medium">
            {{form.medium}}
          </el-form-item>
          <el-form-item label="户籍" prop="household">
            {{form.household}}
          </el-form-item>
          <el-form-item label="户口性质" prop="residence">
            {{form.residence}}
          </el-form-item>
          <el-form-item label="资助中心" prop="supportCenterProvince">
            {{form.supportCenterProvince}}
          </el-form-item>
          <el-form-item label="共同借款人信息" prop="guarantor" style="margin-left: 20px">
            {{form.guarantor}}
          </el-form-item>
          <el-form-item label-width="180" label="共同借款人联系电话" prop="guaPhone" style="margin-left: 50px">
            {{form.guaPhone}}
          </el-form-item>
          <el-form-item label-width="180" label="关系" prop="relation" style="margin-left: 20px">
            {{form.relation}}
          </el-form-item>
          <el-form-item label-width="180" label="共同借款人身份证号" prop="guaCardIdentity" style="margin-left: 20px">
            {{form.guaCardIdentity}}
          </el-form-item>
          <el-form-item label-width="180" label="共同借款人健康状态" prop="heath" style="margin-left: 20px">
            {{form.heath}}
          </el-form-item>
          <el-form-item label="入学前户籍所在地" prop="householdOfProvince" label-width="200" style="margin-left: 48px" >
            {{form.householdOfProvince}}
          </el-form-item>
          <el-form-item label="申贷原因" prop="applyReason" style="margin-left: -10px">
            {{form.applyReason}}
          </el-form-item>
        </el-card>

        <el-card style="margin-top: 20px; border-radius: 10px" class="box-card">
          <div slot="header" class="clearfix">
            <el-tag
              type="success"
              effect="plain">
              通讯信息
            </el-tag>
          </div>
          <el-form-item label="手机" prop="phone" style="margin-left: -30px">
            {{ $store.state.user.phonenumber }}
          </el-form-item>
          <el-form-item label="邮政编码" prop="postcode">
            {{form.postcode}}
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            {{ $store.state.user.email }}
          </el-form-item>
          <el-form-item label="QQ" prop="qq">
            {{form.qq}}
          </el-form-item>
          <el-form-item label="通讯地址" prop="address">
            {{form.homeOfProvince}} {{form.homeOfCity}} {{form.homeOfArea}} {{form.homeOfDetail}}
          </el-form-item>
        </el-card>

        <el-card style="margin-top: 20px; border-radius: 10px" class="box-card">
          <div slot="header" class="clearfix">
            <el-tag
              type="danger"
              effect="plain">
              家庭信息
            </el-tag>
          </div>
          <el-form-item label="家庭地址" prop="homeOfProvince" label-width="120" style="margin-left: 50px">
            {{form.householdOfProvince}} {{form.householdOfCity}} {{form.householdOfArea}} {{form.householdOfDetail}}
          </el-form-item>
          <el-form-item label="家庭住址邮政编码" prop="homeOfPostcode" label-width="140" style="margin-left: 40px">
            {{form.homeOfPostcode}}
          </el-form-item>
          <el-form-item label="家庭电话" prop="homeOfPhone">
            {{form.homeOfPhone}}
          </el-form-item>
        </el-card>

        <el-card style="margin-top: 20px; border-radius: 10px" class="box-card">
          <div slot="header" class="clearfix">
            <el-tag
              type="warning"
              effect="plain">
              联系人信息
            </el-tag>
          </div>
          <el-form-item label="联系人姓名" prop="concatOfName" style="margin-left: 14px">
            {{form.concatOfName}}
          </el-form-item>
          <el-form-item label="工作单位" prop="concatWorkUnit">
            {{form.concatWorkUnit}}
          </el-form-item>
          <el-form-item label="联系人电话" prop="concatOfPhone">
            {{form.concatOfPhone}}
          </el-form-item>
          <el-form-item label="联系人身份证号" prop="concatOfCardIdentity" style="margin-left: 40px">
            {{form.concatOfCardIdentity}}
          </el-form-item>
        </el-card>

        <el-card style="margin-top: 20px; border-radius: 10px" class="box-card">
          <div slot="header" class="clearfix">
            <el-tag
              type=""
              effect="plain">
              就学信息
            </el-tag>
          </div>
          <el-form-item label="高校名称" prop="collegeOfName">
            {{form.collegeOfName}}
          </el-form-item>
          <el-form-item label="院系名称" prop="collegeOfInstitute">
            {{form.collegeOfInstitute}}
          </el-form-item>
          <el-form-item label="专业名称" prop="collegeOfMajor">
            {{form.collegeOfMajor}}
          </el-form-item>
          <el-form-item label="学历" prop="collegeOfEducation">
            {{form.collegeOfEducation}}
          </el-form-item>
          <el-form-item label="入学时间" prop="collegeWithStart">
            {{form.collegeWithStart}}
          </el-form-item>
          <el-form-item label="学号" prop="studentNo" style="margin-left: -28px">
            {{form.studentNo}}
          </el-form-item>
          <el-form-item label="专业类别" prop="typeOfMajor">
            {{form.typeOfMajor}}
          </el-form-item>
          <el-form-item label="学制" prop="collegeOfEducationalSystem">
            {{form.collegeOfEducationalSystem}}
          </el-form-item>
          <el-form-item label="毕业时间" prop="collegeWithEnd" label-width="140px">
            {{form.collegeWithEnd}}
          </el-form-item>
        </el-card>

        <el-card style="margin-top: 20px; border-radius: 10px" class="box-card">
          <div slot="header" class="clearfix">
            <el-tag
              type="danger"
              effect="plain">
              其它信息
            </el-tag>
          </div>
          <el-form-item style="width: 1000px">

          </el-form-item>
          <el-form-item label="变更原因" prop="changeForReason">
            {{form.changeForReason}}
          </el-form-item>
        </el-card>

      </el-form>
    <el-tag type="warning" effect="dark" style="margin-left:10px; font-size: 14px">注意事项：   只有当年毕业的学生才能做毕业确认申请。</el-tag><br/>
    <el-button type="primary" style="margin-left:10px; margin-top: 40px">毕业确认</el-button>
      <el-button type="success" @click="exportWord">导出生源地毕业确认表</el-button>
  </div>
</template>

<script>
  import { listData, getData, delData, addData, updateData, exportData } from "@/api/county/credit";
  import { regionData } from 'element-china-area-data'

  export default {
    data() {
      return {
        imgRealizeName: '',
        imgRealizeNation: '',
        imgRealizeIdCard: '',
        dialogImageUrl: '',
        dialogVisible: false,
        user: '',
        options: regionData,
        selectedOptions: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        form: {},
        // 表单校验
        rules: {
          creditLabel: [
            { required: true, message: "数据标签不能为空", trigger: "blur" }
          ],
          creditValue: [
            { required: true, message: "数据键值不能为空", trigger: "blur" }
          ],
          creditSort: [
            { required: true, message: "数据顺序不能为空", trigger: "blur" }
          ]
        },
      };
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.loading = true;
        listData(this.$store.state.user.name).then(response => {
          console.log(response.rows)
          this.form = response.rows[0]
          this.total = response.total;
          this.loading = false;
        });
      },
      // 点击导出word
      exportWord(row) {
        let _this = this;
        // 读取并获得模板文件的二进制内容
        JSZipUtils.getBinaryContent("/贷款申请表.docx", function(error, content) {
          // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }

          // 创建一个JSZip实例，内容为模板的内容
          let zip = new JSZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new window.docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
            userName: row.userName,
            sex: _this.user.sex === 1 ? '女' : '男',
            birth: row.birth,
            cardIdentity: row.cardIdentity,
            nation: '毛南族',
            medium: row.medium,
            householdOfProvince: row.householdOfProvince,
            householdOfCity: row.householdOfCity,
            householdOfArea: row.householdOfArea,
            householdOfDetail: row.householdOfDetail,
            phone: _this.user.phonenumber,
            email: _this.user.email,
            phone: _this.user.phonenumber,
            householdOfProvince: row.householdOfProvince,
            householdOfCity: row.householdOfCity,
            householdOfArea: row.householdOfArea,
            householdOfDetail: row.householdOfDetail,
            guarantor: row.guarantor,
            guaPhone: row.guaPhone,
            relation: row.relation,
            guaCardIdentity: row.guaCardIdentity,
            guaPhone: row.guaPhone,
            heath: row.heath,
            homeOfProvince: row.homeOfProvince,
            homeOfCity: row.homeOfCity,
            homeOfArea: row.homeOfArea,
            collegeOfName: row.collegeOfName,
            collegeOfInstitute: row.collegeOfInstitute,
            collegeOfMajor: row.collegeOfMajor,
            collegeWithStart: row.collegeWithStart,
            collegeOfEducationalSystem: row.collegeOfEducationalSystem,
            collegeWithEnd: row.collegeWithEnd,
            collegeOfEducation: row.collegeOfEducation,
            studentNo: row.studentNo,
            collegeOfMajor: row.collegeOfMajor,
            yearLimit: '六年',
            money: '6000',
            userName: row.userName,
            countyUnit: row.countyUnit,
            countyOfConcat: '谭选项',
            countyOfPhone: '13627743242',
            // ..._this.form
            // table: _this.tableData
          });

          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
            };
            console.log(JSON.stringify({ error: e }));
            throw error;
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, "学生贷款申请表.docx");
        });
      }
    },
  };
</script>
